<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <title>教练</title>
    <link rel="stylesheet" href="../../lib/layui/css/layui.css">
    <link rel="stylesheet" href="../../css/okadmin.css">
</head>
<body>
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-body">
            <div class="layui-row layui-col-space15" style="width: 80%;margin: 0 auto">
                <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
                </fieldset>
                <div class="layui-row">
                    <div class="layui-col-xs6">
                        <div>
                            <img width="380" style="float:right;margin-right: 20%" height="270" src="" id="photo">
                        </div>
                        <div class="layui-btn layui-btn-normal" style="float:right;margin-right: 40%;margin-top: 20px"
                             id="choiceBtn">选择此教练
                        </div>
                    </div>
                    <div class="layui-col-xs6">
                        <div class="layui-row">
                            <div class="layui-col-xs6">
                                <fieldset class="layui-elem-field">
                                    <legend>姓名</legend>
                                    <div class="layui-field-box" id="fullname">

                                    </div>
                                </fieldset>
                            </div>
                            <div class="layui-col-xs6">
                                <fieldset class="layui-elem-field">
                                    <legend>性别</legend>
                                    <div class="layui-field-box" id="agender">

                                    </div>
                                </fieldset>
                            </div>
                        </div>
                        <fieldset class="layui-elem-field">
                            <legend>评分</legend>
                            <div class="layui-field-box">
                                <div class="lf_rate" id="score"></div>
                            </div>
                        </fieldset>
                        <fieldset class="layui-elem-field">
                            <legend>教龄</legend>
                            <div class="layui-field-box">
                                <span id="joiningYear"></span>年
                            </div>
                        </fieldset>
                    </div>
                </div>
            </div>
            <div class="layui-row layui-col-space15" style="width: 60%;margin: 0 auto">
                <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
                    <legend style="font-size: 16px">学员评价</legend>
                    <span class="layui-btn layui-btn-xs layui-btn-primary showType"
                          style="float: right;cursor:pointer;margin-right: 10px" type="3">评分最低</span>
                    <span class="layui-btn layui-btn-xs layui-btn-primary showType"
                          style="float: right;cursor:pointer;margin-right: 10px" type="2">评分最高</span>
                    <span class="layui-btn layui-btn-xs layui-btn-normal showType" style="float: right;cursor:pointer;"
                          type="1">时间最近</span>
                </fieldset>
                <ul class="layui-timeline" id="evaluate">
                </ul>
                <div id="layPage" style="text-align: center"></div>
            </div>
        </div>
    </div>
</div>
<div id="replyEvaluateOk" style="display: none">
    <div class="layui-form">
        <div class="layui-form-item" style="margin-top: 3%">
            <fieldset class="layui-elem-field">
                <div class="layui-col-xs10">
                <textarea id="replyEvaluateContentOk" type="text/plain" disabled
                          style="width:100%;height:250px;margin-left: 40px;resize:none;"></textarea>
                </div>
            </fieldset>
        </div>
    </div>
</div>
<script src="../../lib/layui/layui.js"></script>
<script src="../../js/jquery.min.js"></script>
<script src="../../js/application.js"></script>
<script>
    if (isNoEmpty(user['studyType']) && user['studyType'] != -1) {
        $("#choiceBtn").hide()
    }
    var limit = 10
    var reply;
    layui.use(['table', 'layer', 'rate', 'laypage'], function () {
        var table = layui.table,
            $ = layui.$,
            layer = layui.layer,
            rate = layui.rate,
            laypage = layui.laypage;
        var evaluateData;

        var coachId = GetQueryString("coachId");
        myAjax(mainUri + "/coach/selects", {coachId: coachId}, function (d) {
            if (d['code'] == 0) {
                var data = d['data'][0]
                var photo = isNoEmpty(data['photo']) ? MainIP + mainUri + data['photo'] : '../../images/userImgError.png'
                $("#photo").attr("src", photo)
                $("#fullname").html(data['fullname'])
                $("#agender").html(data['agender'] ? "男" : "女")
                $("#score").attr("lay-data", "{value:" + data['score'] / 2 + " ,readonly: true, text:true ,half:true}")
                $("#joiningYear").html((dateGapByDay("", data['joiningTime']) / 365).toFixed(1))
                setRate();
            }
        })

//回复评论
        reply = function (id) {
            for (val of evaluateData) {
                if (val["evaluateId"] == id) {
                    if (isNoEmpty(val["reply"])) {
                        $("#replyEvaluateContentOk").val(val["reply"])
                    }
                    break;
                }
            }
            var width = document.body.clientWidth / 3
            if (isNoEmpty(val["reply"])) {
                layer.open({
                    type: 1,
                    content: $('#replyEvaluateOk'), //这里content是一个普通的String
                    area: [width.toString() + 'px', '450px'],
                    shadeClose: true,
                    maxmin: true,
                    cancel: function (index, layero) {
                        layer.close(index);
                        return false;
                    }
                });
            }
        }

        var setRate = function () {
            //多个评分
            layui.each($('.lf_rate'), function (index, elem) {

                var configTemp = $(elem).attr('lay-data');
                try {
                    configTemp = eval('(' + configTemp + ')');

                } catch (e) {
                    configTemp = {};

                }

                rate.render($.extend(true, {
                    elem: elem
                    , setText: function (value) { //自定义文本的回调
                        this.span.text((value * 2).toFixed(1));
                    }
                }, configTemp));

            });
        }

        function getEvaluateHtml(d) {
            var top = '<li style="margin-bottom: 20px;" >\n' +
                '      <div class="layui-timeline-content layui-text">\n' +
                '       <h3 class="layui-timeline-title"><span>' + d['evaluateContent'] + '</span></h3>\n' +
                '       <p>\n' +
                '        <div class="lf_rate" lay-data="{value:' + d['score'] / 2 + ' ,readonly: true, text:true ,half:true}" ></div>\n';
            var content = "";
            if (isNoEmpty(d['reply'])) {
                content = '        <span class="layui-btn layui-btn-xs llayui-btn-normal" style="float: right;margin-right: 5%" onclick="reply(\'' + d["evaluateId"] + '\')">查看回复</span>\n';
            }
            var bottom = '        <span style="float: right;margin-right: 5%" >' + d['createDate'] + '</span>\n' +
                '         </p>\n' +
                '          </div>\n' +
                '       </li>\n' +
                '       <hr>'
            return top + content + bottom;
        }

        //分页
        function setEvaluates(page, type) {
            var data = {coachId: coachId, type: type, page: page, limit: limit}
            myAjax(mainUri + "/evaluate/selects", data, function (d) {
                if (d['code'] == 0) {
                    $("#evaluate").html("");
                    evaluateData = d['data']
                    for (val of d['data']) {
                        $("#evaluate").append(getEvaluateHtml(val))
                    }
                    setRate();
                }
            })
        }

        //加载评论
        function setEvaluate(type) {
            var data = {coachId: coachId, type: type, page: 1, limit: limit}
            myAjax(mainUri + "/evaluate/selects", data, function (d) {
                if (d['code'] == 0) {
                    laypage.render({
                        elem: 'layPage' //注意，这里的 test1 是 ID，不用加 # 号
                        , count: d['count'] //数据总数，从服务端得到
                        , limit: limit
                        , jump: function (obj, first) {
                            if (!first) {
                                setEvaluates(obj.curr, type)
                            }
                        }
                    });
                    evaluateData = d['data']
                    $("#evaluate").html("");
                    for (val of d['data']) {
                        $("#evaluate").append(getEvaluateHtml(val))
                    }
                    setRate();
                }
            })
        }

        setEvaluate(1)


        $(".showType").on('click', function () {
            $(".showType").removeClass("layui-btn-normal")
            $('.showType').addClass("layui-btn-primary")
            $(this).removeClass("layui-btn-primary")
            $(this).addClass("layui-btn-normal")
            setEvaluate($(this).attr("type"))
        })
        $("#choiceBtn").on('click', function () {
            if (user['studyType'] != -1) {
                return
            } else {
                layer.confirm("确定选择此教练信息?", function (index) {
                    showloading(true)
                    myAjax(mainUri + "/choice/insert", {coachId: coachId}, function (d) {
                        if (d['code'] == 0) {
                            showloading(false)
                            window.sessionStorage.setItem("user", JSON.stringify(d['data']));
                            layer.msg(d['msg'], {
                                icon: 1, time: 1500, end: function () {
                                    layer.close(index);
                                    location.reload();
                                }
                            })
                        }
                    })
                })
            }
        })
    });
</script>
</body>
</html>
`